<template>
    <div class="StatisticalAdministration">
        <div class="btn">
            <el-button type="primary" @click="scriptAddInfo">添加</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column type="index" label="序号" align="center" width="80">
            </el-table-column>
            <el-table-column
                    v-for="(item,index) in columns"
                    :key="index"
                    :prop="item.key"
                    :label="item.title"
                    align="center"
                    :width="item.width ? item.width : ''"
            >
                <template slot-scope="scope">
                    <div v-if="item.key=='statusName'">
                        <el-switch v-model="scope.row.status" @change="handleStatusChange(scope.row)" active-value="1"
                                   inactive-value="0"></el-switch>
                    </div>
                    <div v-else>{{scope.row[item.key]}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                    <el-button @click="editInfo(scope.row.jobId)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="delClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    module.exports = {
        props: {
            title: {
                type: String
            },
            index: {
                type: String
            }
        },
        data: function () {
            return {
                who: 'world',
                columns: [
                    {
                        title: '统计任务名称',
                        key: 'name'
                    },
                    {
                        title: '统计任务编号',
                        key: 'jobNum'
                    },
                    {
                        title: '处理方式',
                        key: 'processType'
                    },
                    {
                        title: '使用脚本名称',
                        key: 'scriptName'
                    },
                    {
                        title: '任务启用状态',
                        key: 'statusName'
                    },
                ],
                tableData: []
            }
        },
        watch: {
            // 此处监听variable变量，当期有变化时执行
            index(item1, item2) {
                alert(item1)
                // item1为新值，item2为旧值
            }
        },
        mounted() {
            this.scriptListInfo()
        },
        // scriptListInfo
        methods: {
            //查询用户信息并加载数据
            scriptListInfo: function () {
                var that = this;
                $http.get({
                    url: api.scriptListInfo,
                    // data:{
                    //   token:that.token
                    // },
                    success: (result, data) => {
                        console.log(data)
                        if (data.code == "200") {
                            this.tableData = data.rows
                        }
                    },
                    error: (err) => {

                    }
                }, that)
            },
            delClick(scope) {
                var that = this;
                this.$confirm('此操作将永久删除该脚本, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $http.post({
                        url: api.deleteInfo,
                        data: {
                            // token:that.token
                            jobIds: [scope.jobId]
                        },
                        contentType: "json",
                        success: (result, data) => {
                            console.log(data)
                            if (data.code == "200") {
                                this.scriptListInfo()
                            }
                        },
                        error: (err) => {

                        }
                    }, that)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleStatusChange(scope) {
                console.log(scope)
            },
            scriptAddInfo() {
                this.$parent.$parent.activeName = this.$parent.$parent.menuModel = 'taskEdit'
                localStorage.setItem("scriptaddInfo", JSON.stringify({}));
            },
            editInfo(num) {
                // 根据id获取
                var that = this;
                $http.get({
                    url:api.scriptListDetails,
                    data:{
                        id:num,
                    },
                    success:(result,data)=>{
                        if (data.code == "200"){
                            this.$parent.$parent.activeName = this.$parent.$parent.menuModel = 'taskEdit'
                            localStorage.setItem("scriptaddInfo", JSON.stringify(data.data.scriptParamList || {}));
                            // console.log(this.scriptListDetails)
                        }
                    }
                },that)

            }
        }
    }

</script>

<style>
    .StatisticalAdministration {
        /*margin-left:40px;*/
        /*width: 100%;*/
        height: 100%;

    }

    .btn {
        margin-left: 0;
        width: 100%;
    }

</style>